<template>
  <div class="w-[200px] h-[150px]">
    <BorderBox1 :color="['#0B258C', 'tomato']" background-color="#011948">
      <div class="flex flex-col items-center justify-center p-2">
        <span class="mt-[20px] mb-[10px] font-bold text-[#4387f8] text-[18px] font-[XingShu]">{{ props.title }}</span>
        <Decoration2 :color="['#4387f8']" class="!w-[120px] !h-1" />
        <div class="mt-[20px] font-bold text-[#4387f8] text-[22px]">
          <span ref="numRef" class="chart_font_num">{{ props.num }}</span>
          <span
            ref="priceRef"
            class="ml-2 before:content-['¥'] before:text-sm before:mr-1 chart_font_price"
            v-if="props.price"
          >
            {{ props.price }}
          </span>
        </div>
      </div>
    </BorderBox1>
  </div>
</template>

<script setup>
import { CountUp } from "countup.js"; // 操作数字滚动插件
import { BorderBox1, Decoration2 } from "@dataview/datav-vue3";

const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  num: {
    type: Number,
    default: 0,
  },
  price: {
    type: Number,
    default: 0,
  },
});
const numRef = ref();
const priceRef = ref();

const countUpInit = () => {
  // 第三个参数
  // const options = {
  //   useEasing: true, // 是否使用缓动动画，默认为缓动，可以设置为false让其匀速
  //   useGrouping: true, // 对数字进行分组，如12345，按三位一组变为类似123,45这样的
  //   separator: ',', // 分组时使用的分隔符默认是逗号，
  //   decimal: '.', // 小数点
  //   easingFn: easeOutExpo, // 缓动动画的函数
  //   formattingFn: formatNumber, // 格式化数字如12345，格式化为123，45
  //   prefix: '', // 添加前缀如12345，变为￥12345
  //   suffix: '', // 添加后缀如12345 通过添加后缀变为12345$，12345元之类的
  //   numerals: [] // 用来做替换操作，一般用不到，默认为空就是不用他
  // };
  new CountUp(numRef.value, props.num).start();
  new CountUp(priceRef.value, props.price).start();
};

watch(() => props.num, countUpInit);

onMounted(() => countUpInit);
</script>

<style lang="scss" scoped></style>
